<template>
  <div class="world">
    <goods-head-nav></goods-head-nav>
    <com-display></com-display>
    <goods-title></goods-title>
    <goods-detinfo ref="goodsDetinfo"></goods-detinfo>
    <setbottom-ele :allInfo="allInfo" :lbImg="lbImg"></setbottom-ele>
  </div>
</template>

<script>
// 头部导航
import goodsHeadNav from "../components/goods/goodsHeadNav.vue";
// 商品展示轮播
import comDisplay from "../components/goods/comDisplay.vue";
// 商品信息标题
import goodsTitle from "../components/goods/goodsTitle.vue";
// 商品详情信息
import goodsDetinfo from "../components/goods/goodsDetInfo.vue";
// 底部结算
import setbottomEle from "../components/goods/setbottomEle.vue";

export default {
  data() {
    return {
      allInfo: "", // 所有数据
      lbImg: [], // 轮播图地址
    };
  },
  components: {
    goodsHeadNav,
    comDisplay,
    goodsTitle,
    goodsDetinfo,
    setbottomEle,
  },
  created() {
    // 根据 id 请求所有数据
    let info = {
      url: `/product/detail?id=${this.$route.params.id}`,
      type: "get",
    };
    this.$netWork(info).then((res) => {
      if (res.data.status === 0) {
        this.allInfo = res.data.data;
        if (!res.data.data.subImages) {
          return this.lbImg;
        } else {
          this.lbImg = res.data.data.subImages.split(",");
        }
        // 延时获取 ul 在页面中的位置，并由 vuex记录
        this.$nextTick(() => {
          let temp =
            this.$refs.goodsDetinfo.$refs.goodsDetInfo.offsetTop -
            this.$refs.goodsDetinfo.$refs.goodsDetInfo.offsetHeight;
          this.$store.commit("goodsDet", temp);
        });
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.world {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
</style>
